<template>
  <main>
    <div v-bind:style="{ 'background-image': 'url(' + 'http://localhost:3000/api/downloadPhoto/' + photo.path + ')',
    'background-repeat':'no-repeat','background-size':'cover' }" v-for="photo in photos" class="photo">
    </div>

    <div v-if='showLightbox' class="lightbox">
      <div class="panel panel-default" style="margin-bottom: 0;">
        <!-- Default panel contents -->
        <div class="panel-heading">单文件上传有蜜汁BUG，请一次性上传多个文件。以下表格仅是样子</div>
        <div class="panel-body">
          <form method="post"
                class="form-inline" enctype="multipart/form-data">
            <div class="form-group">
              <input type="file" v-on:change="getFile($event)" class="form-control" name="file" multiple>
            </div>
            <div class="form-group">
              <button v-on:click="submitForm()" type="button" class="btn btn-default">上传文件</button>
            </div>
          </form>
        </div>
        <!-- Table -->
        <table class="table table-hover">
          <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>大小</th>
            <th>进度</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(file, index) in files">
            <th scope="row">{{ index - 0 + 1 }}</th>
            <td>{{ file.name }}</td>
            <td>{{ file.size }}</td>
            <td>{{ file.type }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-on:click="showLightbox = !showLightbox" class="upload-button">

    </div>
  </main>
</template>

<script>
  export default {
    name : 'home',
    data() {
      return {
        showLightbox: false,
        photos: [],
        files: null
      }
    },
    computed: {
      userId() {
        return this.$store.state.user.id;
      }
    },
    methods: {
      getFile(event) {
        this.files = event.target.files;
      },
      submitForm() {
        let formData = new FormData();
        formData.append('userId', this.$store.state.userInfo.id);
        console.log(this.files);
        for (let item of this.files) {
          console.log(item);
          formData.append('fileArr', item);
        }
        let instance = this.$axios.create({
          baseURL: this.selfHost,
          timeout: 3000,
          headers: {
            'Authorization': 'Bearer ' + this.$store.state.token,
            'Content-Type':  'multipart/form-data'
          }
        });
        instance.post('/api/uploadPhoto', formData)
          .then(function (response) {
            console.log(response.data.newPhotos);
          })
          .catch(function (error) {
            alert("上传失败！");
            console.log(error);
          });

      },
      test() {
        let testStr = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiMTIzQHFxLmNvbSIsImlhdCI6MTUyNTI2Njk4MiwiZXhwIjoxNTI1Mjc0MTgyfQ.va0JaNPkPJ3JmOPZ_qq4JQO4JLwDlI40iEXUfT-BMsU';
        let instance = this.$axios.create({
          baseURL: this.selfHost,
          //headers: {'Authorization': 'Bearer ' + this.$store.state.token}
          headers: {
            'Authorization': 'Bearer ' + testStr,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        instance.get('/api/test')
          .then(function (response) {
            console.log(response);
          });
      }
    },
    mounted() {
      //let testStr = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiMTIzQHFxLmNvbSIsImlhdCI6MTUyNTI2MTc5NiwiZXhwIjoxNTI1MjY4OTk2fQ.wMwUE2QFfJyZJrFbA9PfWmWRjm8JZEDyNF6xA5ENs_k'
      let instance = this.$axios.create({
        baseURL: this.selfHost,
        timeout: 3000,
        headers: {'Authorization': 'Bearer ' + this.$store.state.token}
        //headers: {'Authorization': 'Bearer ' + testStr}
      });
      console.log('token', this.$store.state.token);
      //console.log('token', testStr);
      let store = this.$store;
      let that = this;
      instance.get('/api/allphotos')
      .then(function (response) {
        console.log(response);
        store.dispatch('getAllPhotos', response.data.allPhotos);
        that.photos = [].concat(response.data.allPhotos);
      });
      console.log('userInfo', this.$store.state.userInfo);
    }
  }
</script>

<style>
  main {
    width: 112rem;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    flex: 1;
  }
  .photo {
    box-sizing: border-box;
    flex: 0 0 25rem;
    height: 25rem;
    margin: 1.4rem 1.4rem;
    background-color: antiquewhite;
  }
  .upload-button {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #729FBF;
    position: fixed;
    bottom: 8rem;
    right: 9rem;
  }
  .lightbox {
    width: 60rem;
    background-color: white;
    position: fixed;
    left: calc(50vw - 30rem);
    top: calc(50vh - 20rem);
    z-index: 1;
  }
</style>

